<template>
  <div class="notice-text-contain mx-auto">
    <div class="notice-text-swiper">
      <div class="notice-logo">
        <i class="el-icon-chat-line-square"></i>
        &nbsp;
        <p>公告</p>
      </div>
      <div class="swiper">
        <el-carousel height="50px" direction="vertical" :interval="2000" indicator-position="none">
          <el-carousel-item v-for="(item,index) in noticeList" :key="index">
            <div class="text-swiper">
              <p>
                {{ item.noticeIntroduce }}
              </p>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="detail bg-hero-pattern">
        <button class="bg-linearblue "  @click=" toActivity()"> 
          <p >了解详情</p>
        </button>
      </div>
    </div>
    <div class="notice-widgets">
      <div class="notice-activity p-4">
        <div class="notice-activity-text flex  flex-col items-center">
          <div class="notice-h1">
            <h1>相关活动</h1>
          </div>
          <div class="notice-p text-left">
            <p>{{ notice.noticeTitle }}</p>
          </div>
          <div class="notice-time">
            <p>{{ notice.noticeTime }}</p>
          </div>
          <div class="notice-button bg-blue-600 " @click="toActivity">
            <p> 立即查看</p>
          </div>
        </div>
        <div class="notice-activity-img">
          <img src="@/image/notice-activity-logo.png" alt="" />
        </div>
      </div>
      <div class="notice-activity p-4">
        <div class="notice-activity-text  flex  flex-col items-center">
          <div class="notice-h1">
            <h1>相关新闻</h1>
          </div>
          <div class="notice-p">
            <p>{{ news.newsTitle }}</p>
          </div>
          <div class="notice-time">
            <p>{{ news.newsTime }}</p>
          </div>
          <div class="notice-button bg-blue-600" @click="toNews">
            <p> 立即查看</p>
          </div>
        </div>
        <div class="notice-activity-img">
          <img src="@/image/notice-news-logo.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NoticeTextSwiper",
  data() {
    return {
      notice: {},
      noticeList: [],
      news: {},
    };
  },
  methods: {
    //新闻跳转
    toNews() {
      this.$router.push("/news")
    },
    //活动跳转
    toActivity() {
      this.$router.push("/notice")
    },
    // 获取news
    getNews() {
      this.$axios.postInfo("findAllNews").then(res => {
        console.log(res)
        this.news = res.listNews.slice(0, 1)[0]
      })
    },
    getNotice(value) {
      console.log(value)
      this.$axios.postInfo("/queryNoticeState", { noticeState: value }).then(res => {
        console.log(res)
        this.notice = res.listNotice.slice(0, 1)[0]
        console.log(this.notice)

      })
    },
    getNoticeList(value) {
      console.log(value)
      this.$axios.postInfo("/queryNoticeState", { noticeState: value }).then(res => {
        console.log(res)
        this.noticeList = res.listNotice.slice(0,5)
        console.log(this.noticeList)

      })
    },

  },
  created() {
    this.getNotice(0)
    this.getNoticeList(5)
    this.getNews()
  }
};
</script>
<style  lang="less" scoped>


.notice-text-contain {
  width: 100%;
  min-width: 900px;
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .notice-text-swiper {
    position: relative;
    width: 100%;
    min-width: 900px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    .notice-logo {
      height: 100%;
      background: linear-gradient(90deg, #649aff, #1a5be6b0);
      padding: 8px 16px 8px 16px;
      box-sizing: border-box;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper {
      width: 700px;
      height: 100%;
      flex-shrink: 0;

      .el-carousel {
        width: 100%;
        height: 100%;

        .text-swiper {
          width: 100%;
          height: 100%;
          // background: red;
          line-height: 55px;
          padding: 0px 10px 0px 10px;
          box-sizing: border-box;

          p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .detail {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      button {
        height: 30px;
        width: 80px;
        border: none;
        // border-radius: 20px;
        color: white;
        // background: linear-gradient(90deg, #649aff, #1a5be6b0);
        // @apply bg-black;
        // padding: 8px 16px 8px 16px;
        box-sizing: border-box;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .notice-widgets {
    position: relative;
    width: 75%;
    min-width: 900px;
    max-height: 350px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-shrink: 0;
    padding-top: 40px;
    padding-bottom: 20px;
    box-sizing: border-box;

    .notice-activity {
      position: relative;
      width: 40%;
      max-width: 490px;
      height: 100%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 1rem;
      box-sizing: border-box;
      box-shadow: 0 10px 24px 0 rgba(151, 147, 147, 0.24);
      border-radius: 4px;

      .notice-activity-text {
        position: relative;

        width: 50%;
        height: 100%;

        .notice-h1 {
          font-size: 28px;
          font-weight: 700;
          margin: 1rem 0;
        }

        .notice-p {
          // margin: 1rem 0;
          text-align: left;
          overflow: hidden;
          text-overflow:ellipsis;
          -webkit-line-clamp: 2;
          word-wrap: break-word;
          display: -webkit-box;
          -webkit-box-orient: vertical;
  }

        .notice-time {
          // padding-left: 1px;
          margin: 1rem 0;

        }

        .notice-button {
          position: relative;
          padding: 0%;
          height: 45px;
          width: 150px;
          line-height: 45px;
          // left: 20%;
          // margin-top: 30%;
          // background: #2469e5;
          border-radius: 24px;
          color: white;
          cursor: pointer;
        }
      }

      .notice-activity-img {
        width: 50%;
        height: 100%;

        img {
          margin-top: 10%;
          width: 90%;
        }
      }
    }
  }
}
</style>